<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background: pink;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <!--  
        1. Event 事件对象
            位置:事件函数的第一个参数
            常用参数名:event 或 eve 或 e (改名字不固定)
        2. 鼠标事件对象
            clientX : 当前鼠标距离body最左侧的距离
            clientY : 当前鼠标距离body最顶部的距离
            screenX : 当前鼠标距离屏幕最左侧的距离
            screenY : 当前鼠标距离屏幕最顶部的距离
            offsetX : 当前鼠标距离当前对象最左侧的距离
            offsetY : 当前鼠标距离当前对象最顶侧的距离
        3. 键盘事件对象
            key: 获取当前按键的真实值(键盘显示什么,就显示什么)
            keyCode: 获取当前按键的ASCII码(不支持onkeypress 事件)
            which: 获取当前按键的ASCII码
        4. event事件对象兼容性
            IE浏览器不识别第一个参数为 事件对象
            event 事件对象原型在window对象中
            兼容写法 : event || window.event
    -->
    <div id="box"></div>
    <script>
        var box = document.getElementById('box');
        box.onmousemove = function(){
            box.innerHTML = event.clientX + '' + event.clientY;
        }
    </script>
    <script>
        document.onkeydown = function(event){
            // console.log(event.key);
            // console.log(event.keyCode);
            // console.log(event.which);
            
            // 当前不确定是onkeydown 还是onkeypress,采用兼容写法
            // console.log(event.which || event.keyCode);
        }
    </script>
    <script>
        document.onkeydown = function(event){
            var event = event || window.event;
            console.log(event.key);
        }
    </script>
    <audio src="./消愁.m4a" id="music" controls></audio>
    <button id="btn9">静音</button>
    <div id="box2"></div>
    <script>
        var music = document.getElementById('music');
        var box2 = document.getElementById('box2');
        var btn9 = document.getElementById('btn9');
        document.onkeydown = function(event){
            var event = event || window.event;
            // 上:ArrowUp    增大音量
            // 下:ArrowDown  减小音量
            if( event.key == 'ArrowUp'){
                music.volume = music.volume + 0.1 > 1 ? 1 : music.volume + 0.1
                music.playbackRate = 2; // 播放速度: 2倍速
            }else if( event.key == 'ArrowDown'){
                music.volume = music.volume - 0.1 < 0 ? 0 : music.volume - 0.1;
                music.playbackRate = 0.5; // 播放速度: 0.5倍速
            }
            box2.innerHTML = music.volume;
        }
        // 静音
        btn9.onclick = function(){
            music.muted = true;
        }
    </script>
</body>
</html>